<include file="Common:header" title="添加舞蹈·"/>



<!--主题-->
<div class="page-header">
    <h1>
        您当前操作
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            添加舞蹈
        </small>
    </h1>
</div>




<div class="row">
    <div class="col-xs-12">
        <form class="form-horizontal" id="form" method="post" action="{:U('Dance/add_dance')}">
            <div class="form-group">
                <label class="col-lg-2 control-label" > 舞蹈名称：  </label>
                <div class="col-sm-4">
                    <input type="text"  id="name" name="name" value="" placeholder=""  class="form-control" />
                </div>
            </div>
            <div class="space-4"></div>

            <!--<div class="form-group">-->
                <!--<label class="col-lg-2 control-label" > 场景类型：  </label>-->
                <!--<div class="col-sm-4">-->
                    <!--<input type="text"  id="scene_type" name="scene_type" value="" placeholder=""  class="form-control" />-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="form-group">-->
                <!--<label class="col-lg-2 control-label" > ：  </label>-->
                <!--<div class="col-sm-4">-->
                    <!--<input type="text"  id="dance_type" name="dance_type" value="" placeholder=""  class="form-control" />-->
                <!--</div>-->
            <!--</div>-->

            <div class="form-group">
                <label class="col-lg-2 control-label" > 舞蹈类型：  </label>

                <div class="col-sm-4">
                    <select name="dance_type" id="dance_type" style="width:100px;" >
                        <volist name="dance_type" id="vo">
                        <option value="{$vo.id}">{$vo.name}</option>
                        </volist>-->
                    </select>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-lg-2 control-label" > 场景类型：  </label>

                <div class="col-sm-4">
                    <select name="scene_type" id="scene_type" style="width:100px;" >
                        <volist name="scene_type" id="vo">
                            <option value="{$vo.id}">{$vo.name}</option>
                        </volist>-->
                    </select>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="space-4"></div>
            <div class="form-group">
                <label class="col-lg-2 control-label" >      舞蹈视频url地址：  </label>
                <div class="col-sm-4">
                    <input type="text"  id="url" name="url" value="" placeholder=""  class="form-control" />
                </div>
            </div>
            <div class="space-4"></div>



            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 图片：<p class="red">要求尺寸：280*70</p>  </label>
                <div class="col-sm-10">
                    <div id="input_bann_img">

                    </div>
                    <div class="pics">
                        <ul id="ul_pics" class="ace-thumbnails clearfix">
                            <li>
                                <div data-rel="colorbox" class="cboxElement">
                                    <img id="images" style="width:280px;height: 70px;" alt="" src="{$images}">
                                    <input type="hidden" name="images">
                                </div>
                            </li>

                        </ul>
                        <button class="btn btn-info btn-sm" type="button" onclick="banner_choose()">
                            <i class="icon-ok bigger-110 "></i>添加图片
                        </button>
                    </div>
                </div>
            </div>
            <div class="space-4"></div>






            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <div class="btn btn-info" onclick="submit_form()">
                        <i class="ace-icon fa fa-check bigger-110"></i>
                        保存
                    </div>

                    <button class="btn" type="reset">
                        <i class="ace-icon fa fa-undo bigger-110"></i>
                        重置
                    </button>

                    <div class="space-4"></div>
                    &nbsp; &nbsp; &nbsp;

                </div>
            </div>
        </form>
    </div>
</div>


<div class="modal fade" id="modal_upload">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">图片裁剪</h4>
            </div>
            <div class="modal-body" style="margin:0 auto; text-align: center;">
                <div id="clipArea" ></div>
                <input type="file" id="file" style="display:none;">
                <button class="btn btn-info btn-sm" type="button"  onclick="$('#file').click();">
                    <i class="icon-ok bigger-110 "></i>选择图片
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="clipBtn" type="button" class="btn btn-primary" data-dismiss="modal">确定图片</button>
            </div>
        </div>
    </div>
</div>
<style>
    .clearfix li{
        display:inline;
    }
    #clipArea {
        margin: 20px;
        height: 200px;
    }
    #file,
    #clipBtn {
        margin: 20px;
    }
</style>


<script src="__PUBLIC__/assets/js/jquery-2.1.1.js"></script>

<script src="__PUBLIC__/photoClip/js/iscroll-zoom.js"></script>
<script src="__PUBLIC__/photoClip/js/hammer.js"></script>
<script src="__PUBLIC__/photoClip/js/jquery.photoClip.js"></script>

<include file='Common:header_nav' />
<script>
    //删除banner图
    function del_banner(number){
        $('#li_'+number).remove();
    }
    //用来计算banner图片个数
    var num = 0;
    //图片裁剪初始
    $("#clipArea").photoClip({
        width: 280,
        height: 70,
        file: "#file",
        ok: "#clipBtn",
//		loadStart: function() {
//			console.log("照片读取中");
//		},
//		loadComplete: function() {
//			console.log("照片读取完成");
//		},
        clipFinish: function(dataURL) {
            $('#images').attr('src',dataURL);
            $('input[name=images]').val(dataURL);
        }
    });
    //banner选择
    function banner_choose(){
        $("#modal_upload").modal();
        //点击选择图片。有时chrome浏览器反应很慢
        //$('#file').click();
    }




</script>

<script>
    function submit_form() {
        if ($('#title').val() == '') {
            layer.msg('标题不能为空');
            $('#title').focus();
            return false;
        }


//        if ($('#smalltitle').val() == '') {
//            layer.msg('小标题不能为空');
//            $('#smalltitle').focus();
//            return false;
//        }


        if ($('#url').val() == '') {
            layer.msg('视频url地址不能为空');
            $('#url').focus();
            return false;
        }



        if ($('#file').val() == '') {
            layer.msg('图片不能为空');
            $('#file').focus();
            return false;
        }


        $('#form').submit();
    }
</script>


<include file="Common:footer"/>